<template>
  <a-modal
    :open="props.visible"
    title="全局搜索"
    :footer="null"
    width="600px"
    @cancel="handleClose"
  >
    <a-input-search
      v-model:value="searchText"
      placeholder="搜索告警、工单、知识库..."
      size="large"
      @search="handleSearch"
      autofocus
    />

    <div v-if="searchText" class="mt-4">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="alerts" tab="告警">
          <a-list
            v-if="results.alerts.length > 0"
            :data-source="results.alerts"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item class="cursor-pointer hover:bg-gray-50" @click="handleItemClick('alert', item)">
                <a-list-item-meta :title="item.title" :description="item.description" />
              </a-list-item>
            </template>
          </a-list>
          <a-empty v-else description="未找到相关告警" />
        </a-tab-pane>

        <a-tab-pane key="tickets" tab="工单">
          <a-list
            v-if="results.tickets.length > 0"
            :data-source="results.tickets"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item class="cursor-pointer hover:bg-gray-50" @click="handleItemClick('ticket', item)">
                <a-list-item-meta :title="item.title" :description="item.description" />
              </a-list-item>
            </template>
          </a-list>
          <a-empty v-else description="未找到相关工单" />
        </a-tab-pane>

        <a-tab-pane key="knowledge" tab="知识库">
          <a-list
            v-if="results.knowledge.length > 0"
            :data-source="results.knowledge"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item class="cursor-pointer hover:bg-gray-50" @click="handleItemClick('knowledge', item)">
                <a-list-item-meta :title="item.title" :description="item.description" />
              </a-list-item>
            </template>
          </a-list>
          <a-empty v-else description="未找到相关知识" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const router = useRouter()

const searchText = ref('')
const activeTab = ref('alerts')
const results = ref({
  alerts: [] as any[],
  tickets: [] as any[],
  knowledge: [] as any[],
})

const handleClose = () => {
  emit('update:visible', false)
  searchText.value = ''
  results.value = {
    alerts: [],
    tickets: [],
    knowledge: [],
  }
}

const handleSearch = async () => {
  // TODO: 实现真实的搜索逻辑
  console.log('搜索:', searchText.value)
}

const handleItemClick = (type: string, item: any) => {
  handleClose()

  switch (type) {
    case 'alert':
      router.push(`/alerts/${item.id}`)
      break
    case 'ticket':
      router.push(`/tickets/${item.id}`)
      break
    case 'knowledge':
      router.push(`/knowledge/${item.id}`)
      break
  }
}

watch(() => props.visible, (newVal) => {
  if (!newVal) {
    searchText.value = ''
  }
})
</script>
